<template>
	<view class="">
		<view v-if="info.is_agent === 100 || info.is_agent === 102" class="status-hint">
			<!-- 点击进入采购订单详情页面 -->
			<view class="iconfont icon-gantanhao"></view>
			<block v-if="info.is_agent === 100">
				<view class="">您的申请资料未提交,请支付定金后提交</view>
			</block>
			<block v-if="info.is_agent === 102">
				<view class="">您的申请资料已通过审核,待支付尾款激活</view>
			</block>
			<view class="link-btn" @click="goProcureInfo">查看</view>
		</view>

		<view class="base-info">
			<view class="info">
				<view class="flex align-center" style="gap: 28rpx;">
					<view class="title">基础信息</view>
				</view>
				<view class="info-list">
					<view class="info-item">
						<view class="item-label">申请状态：</view>
						<view class="tags">
							<view v-if="info.is_agent === -1" class="tag-item tag-complate">已驳回</view>
							<view v-if="info.is_agent === 0" class="tag-item ">未申请</view>
							<view v-if="info.is_agent === 1" class="tag-item tag-success">已激活</view>
							<view v-if="info.is_agent === 100" class="tag-item tag-error">未提交,待支付定金</view>
							<view v-if="info.is_agent === 101" class="tag-item tag-wait">审核中</view>
							<view v-if="info.is_agent === 102" class="tag-item tag-error">通过审核,待支付尾款</view>
							<view v-if="info.is_agent === 103" class="tag-item tag-complate">已禁用</view>
						</view>
					</view>
					<view class="info-item">
						<view class="item-label">姓名：</view>
						<view>{{info.linkman}}</view>
					</view>
					<view class="info-item">
						<view class="item-label">手机号：</view>
						<view></view>
						{{info.phone}}
					</view>
					<view class="info-item">
						<view class="item-label">身份证号：</view>
						<view>{{info.id_card_no}}</view>
					</view>
					<view class="info-item">
						<view class="item-label">学校社团成员：</view>
						<view>{{info.is_club_card ? '是' : '否'}}</view>
					</view>
					<view class="info-item">
						<view class="item-label">学校名称：</view>
						<view>{{info.name}}</view>
					</view>
					<view class="info-item">
						<view class="item-label">所属区域：</view>
						<view>{{info.province}}{{info.city}}{{info.area}}</view>
					</view>
					<view class="info-item">
						<view class="item-label">详细地址：</view>
						<view>{{info.address}}</view>
					</view>
				</view>
			</view>
			
			<view class="info">
				<view class="flex align-center" style="gap: 28rpx;">
					<view class="title">附件图片</view>
				</view>
				<view class="info-list">
					<view class="info-item" style="display: block;">
						<view class="flex-shrink">身份证图片：</view>
						<view class="ID-card-images">
							<view class="card-item" v-for="(item, index) in info.identity_card_data" :key="index" @click="handlePreviewImage(info.identity_card_data, index)">
								<image :src="item.url" mode="aspectFit"></image>
							</view>
						</view>
					</view>
					<view class="info-item" style="display: block;">
						<view class="flex-shrink">学生证图片：</view>
						<view class="card-images">
							<view class="item-img" v-for="(item, index) in info.student_card_data" :key="index" @click="handlePreviewImage(info.student_card_data, index)">
								<image :src="item.url" mode="aspectFill"></image>
							</view>
						</view>
					</view>
					<view class="info-item" style="display: block;">
						<view class="flex-shrink">资金证明图片：</view>
						<view class="card-images">
							<view class="item-img" v-for="(item, index) in info.asset_certificate_data" :key="index" @click="handlePreviewImage(info.asset_certificate_data, index)">
								<image :src="item.url" mode="aspectFill"></image>
							</view>
						</view>
					</view>
					<view v-if="info.credit_report_data && info.credit_report_data.length" class="info-item" style="display: block;">
						<view class="flex-shrink">征信报告图片：</view>
						<view class="card-images">
							<view class="item-img" v-for="(item, index) in info.credit_report_data" :key="index" @click="handlePreviewImage(info.credit_report_data, index)">
								<image :src="item.url" mode="aspectFill"></image>
							</view>
						</view>
					</view>
					<view class="info-item" style="display: block;" v-if="info.is_club_card">
						<view class="flex-shrink">社团图片图片：</view>
						<view class="card-images">
							<view class="item-img" v-for="(item, index) in info.club_card_data" :key="index" @click="handlePreviewImage(info.club_card_data, index)">
								<image :src="item.url" mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</view>
			</view>

			<block v-if="info.is_agent === 100">
				<view class="info">
					<view class="flex align-center" style="gap: 28rpx;">
						<view class="title">申请单信息</view>
					</view>
					<view class="info-list">
						<view class="info-item">
							<view class="item-label">订单编号：</view>
							{{orderInfo.order_no}}
						</view>
						<view class="info-item">
							<view class="item-label">用户姓名：</view>
							{{orderInfo.user_name}}
						</view>
						<view class="info-item">
							<view class="item-label">用户手机：</view>
							{{orderInfo.user_phone}}
						</view>
						<view class="info-item">
							<view class="item-label">收货地址：</view>
							{{orderInfo.user_address}}
						</view>
						<view class="info-item">
							<view class="item-label">订单状态：</view>
							<view class="tags">
									<view v-if="orderInfo.order_status === -1" class="tag-item ">待支付</view>
									<view v-if="orderInfo.order_status === 1" class="tag-item tag-success">已完成</view>
									<view v-if="orderInfo.order_status === 2" class="tag-item tag-wait">待付款</view>
									<view v-if="orderInfo.order_status === 3" class="tag-item tag-wait">待确认</view>
									<view v-if="orderInfo.order_status === 4" class="tag-item tag-wait">待发货</view>
									<view v-if="orderInfo.order_status === 5" class="tag-item tag-wait">待收货</view>
							</view>
						</view>
						<view class="info-item">
							<view class="item-label">支付类型：</view>
							{{orderInfo.pay_type ? '定金' : '全款'}}
						</view>
						<view class="info-item">
							<view class="item-label">订单备注：</view>
							{{orderInfo.remark ? orderInfo.remark : '无'}}
						</view>
					</view>
				</view>
				<view class="info">
					<view class="flex align-center" style="gap: 28rpx;">
						<view class="title">选购产品清单</view>
					</view>
					
					<view class="product-lists">
						<view class="product-item" v-for="item in orderInfo.product" :key="item">
							<view class="info-list">
								<view class="info-item">产品名称：{{item.product_title}}</view>
								<view class="info-item">数量：{{item.quantity}}台</view>
								<view v-if="item.relation" class="info-item">服务：
								<block v-if="item.relation && item.relation.length">
									<text v-for="(relation, idx) in item.relation" :key="idx">{{relation.product_title}}{{idx < item.relation.length-1 ? '、' : ''}}</text>
								</block>
								<text v-else>无</text>
								</view>
								<view class="info-item">金额：{{item.total_price | formatPrice($formatPrice)}}元</view>
							</view>
							<view class="item-img">
								<image :src="item.product_thumb" mode="aspectFill"></image>
							</view>
						</view>
					</view>
					<view style="padding-top: 36rpx;">
						<view class="flex align-center justify-end">
							<view class="total">
								<text class="total-title">合计</text>
								<text>(含运费)：</text>
							</view>
							<view class="total-price">
								<text class="price-unit">￥</text>
								<text>{{orderInfo.pay_total_fee | formatPrice($formatPrice, '')}}元</text>
							</view>
						</view>
						<view v-if="orderInfo.pay_deposit_fee && orderInfo.pay_type === 1 && orderInfo.order_status === 2" class="flex align-center justify-end" style="padding-top: 14rpx;">
							<view class="preferential">
								<text>需支付订金：</text>
							</view>
							<view class="total-price detial-btn">
								<text class="price-unit">¥</text>
								<text>{{orderInfo.pay_deposit_fee | formatPrice($formatPrice, '')}}元</text>
							</view>
						</view>
						<view v-if="orderInfo.parcel_fee" class="flex align-center justify-end" style="padding-top: 14rpx;">
							<view class="preferential">
								<text>需付快递费：</text>
							</view>
							<view class="total-price detial-btn">
								<text class="price-unit">¥</text>
								<text>{{orderInfo.parcel_fee | formatPrice($formatPrice, '')}}元</text>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>


		<view v-if="(info.is_agent === 100 || info.is_agent === 102 || orderInfo.order_status === 2) && info.is_agent !== 1" class="footer-btns">
			<button v-if="info.is_agent === 100" class="cancel-btn flex-1" @click="handleCancel">取消申请单</button>
			<button v-if="orderInfo.order_status === 2 && orderInfo.unpaid_fee > 0" class="confirm-btn flex-1" @click="handlePayment">支付{{info.is_agent === 102 ? '尾款' : '定金'}}({{ orderInfo.unpaid_fee }}元)</button>
		</view>
	</view>
</template>

<script>
	import {
		previewImage
	} from '@/utils/uploadImg.js'
	import formatPrice from '@/mixins/formatPrice.js';
	

	export default {
		mixins:[formatPrice],
		data() {
			return {
				info: {},
				orderId: '',
				orderInfo: {}
			};
		},
		onShow() {
			this.agentGetHistoryInfo()
		},
		methods: {
			goProcureInfo() {
				uni.navigateTo({
					url: '/pages/agent/procure/order-info/order-info?orderId=' + this.info.order_gid
				})
			},
			// 预览图片
			handlePreviewImage(list, index) {
				const lists = list.map(item => item.url)
				previewImage(lists, index)
			},
			// 获取历史信息
			agentGetHistoryInfo() {
				this.$api.agentGetHistoryInfoApi().then(res => {
					this.info = res.data
					this.info.identity_card_data = res.data.identity_card_data ? res.data.identity_card_data.split(
						',').map(item => ({
						url: item
					})) : []; // string  可选 身份证图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
					this.info.student_card_data = res.data.student_card_data ? res.data.student_card_data.split(
						',').map(item => ({
						url: item
					})) : []; // string  可选 学生证图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
					this.info.asset_certificate_data = res.data.asset_certificate_data ? res.data
						.asset_certificate_data.split(',').map(item => ({
							url: item
						})) : []; // string  可选 资产证明图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
					this.info.credit_report_data = res.data.credit_report_data ? res.data.credit_report_data.split(
						',').map(item => ({
						url: item
					})) : []; // string  可选 征信报告图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
					this.info.club_card_data = res.data.club_card_data ? res.data.club_card_data.split(',').map(
						item => ({
							url: item
						})) : []; // string  可选 社团图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
					this.orderId = this.info.order_gid
					if (this.orderId) {
						this.getOrderInfo()
					} else {
						this.orderInfo = {}
					}
				}).catch(err => {
					console.log('err', err);
				})
			},
			// 获取采购单信息
			getOrderInfo() {
				this.$api.agentOrderDetailsApi(this.orderId).then(res => {
					this.orderInfo = res.data
				}).catch(err => {
					console.log('err', err);
				})
			},
			// 取消申请（重新申请）
			handleCancel() {
				const params = {
					gid: this.orderId, 
					is_cart: 1
				}
				this.$api.agentCancelApplyApi().then(res=> {
					uni.navigateBack()
					// uni.redirectTo({
					// 	url: '/pages/agent/agent?from=baseInfo'
					// })
				}).catch(err=> {
					console.log('err', err);
				})
			},
			// 继续支付
			async handlePayment() {
				const { code } = await uni.login()
				const params = {
					appid: this.$store.state.common.appid, // string 必需 微信小程序appid
					order_gid: this.info.order_gid, // string 订单gid 必需 示例值: 71e3f23b-b20d-4877-b32a-b2fd23a7ddc8
					code: code, // string  必需 wx.login中的code
					order_price: this.orderInfo.unpaid_fee, // number 订单支付金额 必需 示例值: 1332
				}
				this.$api.agentPayCreateApi(params).then(res => {
					uni.showLoading({
						title: '支付中···'
					})
					uni.requestPayment({
						provider: "wxpay",
						orderInfo: {},
						...res.data,
						success: (res) => {
							uni.hideLoading()
							this.agentGetHistoryInfo()
						},
						fail: (err) => {
							uni.hideLoading()
							uni.showToast({
								icon: 'none',
								title: '支付失败'
							})
							console.log('err', err);
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.status-hint {
		position: sticky;
		top: 0;
		z-index: 99;
		height: 96rpx;
		font-size: 26rpx;
		font-weight: 400;
		line-height: 36rpx;
		text-align: left;
		color: rgba(0, 0, 0, 0.6);
		background-color: #fff0ed;
		padding: 8rpx 32rpx;
		border-radius: 12rpx;
		box-sizing: border-box;

		display: flex;
		align-items: center;

		.icon-gantanhao {
			width: 32rpx;
			height: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			font-size: 32rpx;
			color: #D54941;
			margin-right: 16rpx;
		}

		.link-btn {
			position: absolute;
			right: 32rpx;
			font-size: 26rpx;
			font-weight: 400;
			line-height: 36rpx;
			text-align: left;
			color: rgba(0, 61, 153, 1);
		}
	}

	.base-info {
		padding: 32rpx;
		padding-bottom: calc(200rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(200rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		.info {
			padding: 32rpx;
			margin-bottom: 32rpx;
			border-radius: 26rpx;
			background-color: #FFFFFF;
		}

		.title {
			color: #000000;
			font-size: 34rpx;
			font-weight: 400;
			text-align: left;
			line-height: 46rpx;
		}

		.info-list {
			gap: 16rpx;
			display: flex;
			padding-top: 36rpx;
			padding-bottom: 38rpx;
			flex-direction: column;
		}

		.info-item {
			color: #999999;
			font-size: 26rpx;
			text-align: left;
			font-weight: 400;
			line-height: 36rpx;

			display: flex;

			.item-label {
				flex-shrink: 0;
			}
		}
		
		.ID-card-images {
			gap: 20rpx;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			// display: flex;
			// align-items: center;
			padding-top: 24rpx;
			padding-bottom: 8rpx;
			
			.card-item {
				flex: 1;
				height: 160rpx;
				overflow: hidden;
				border-radius: 12rpx;
				background-color: #F6F6F6;
				
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		
		.card-images {
			gap: 20rpx;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			padding-top: 24rpx;
			padding-bottom: 8rpx;
			
			.item-img {
				width: 160rpx;
				height: 160rpx;
				overflow: hidden;
				border-radius: 12rpx;
				background-color: #F6F6F6;
				
				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.images {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 24rpx;

			.img-item {
				width: 160rpx;
				height: 160rpx;
				overflow: hidden;
				border-radius: 12rpx;
				vertical-align: bottom;

				image {
					width: 100%;
					height: 100%;
				}
			}

		}
		
		.product-lists {
			
			.product-item {
				display: flex;
				align-items: center;
				padding-top: 36rpx;
				padding-bottom: 36rpx;
				justify-content: space-between;
				border-bottom: 1px solid #F1F1F1;
			}
			
			.info-list {
				padding: 0;
			}
			
			.item-img {
				width: 154rpx;
				height: 154rpx;
				overflow: hidden;
				border-radius: 12rpx;
				background-color: #F6F6F6;
				
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		
		.total {
			font-size: 20rpx;
			font-weight: 400;
			line-height: 28rpx;
			text-align: left;
			color: rgba(0, 0, 0, 0.4);
		}
		
		.total-title {
			font-size: 28rpx;
			font-weight: 400;
			line-height: 38rpx;
			text-align: left;
			color: #000000;
		}
		
		.total-price {
			font-size: 34rpx;
			font-weight: 700;
			line-height: 38rpx;
			text-align: left;
			color: #000000;
		}
		
		.price-unit {
			font-size: 20rpx;
			font-weight: 400;
			line-height: 28rpx;
			text-align: left;
		}
		
		.preferential {
			font-size: 28rpx;
			font-weight: 400;
			line-height: 38rpx;
			text-align: left;
			color: rgba(0, 0, 0, 1);
		}
		
		.detial-btn {
			color: #FF754C;
		}
		
		.tags {
			display: flex;
			align-items: center;
			gap: 10rpx;
		}

		.tag-item {
			display: flex;
			align-items: center;
			justify-content: center;

			padding: 4rpx 8rpx;
			border-radius: 8rpx;
			background-color: #868686;

			color: #FFFFFF;
			font-size: 18rpx;
			font-weight: 400;
			line-height: 24rpx;
			text-align: left;
		}

		.tag-success {
			background-color: #009D6E;
		}
		
		.tag-complate {
			background-color: #D4D4D4;
		}
		
		.tag-wait {
			background-color: #003D99;
		}
		
		.tag-error {
			background-color: #ff5252;
		}

		.status {
			display: flex;
			align-items: center;
			gap: 10rpx;
		}

		.status-item {
			display: flex;
			align-items: center;
			justify-content: center;

			padding: 4rpx 8rpx;
			border-radius: 8rpx;
			border: 1px solid #868686;

			color: #868686;
			font-size: 18rpx;
			font-weight: 400;
			line-height: 24rpx;
			text-align: left;
		}

		.status-success {
			color: #009D6E;
			border: 1px solid #009D6E;
		}

		.status-complate {
			color: #D4D4D4;
			border: 1px solid #D4D4D4;
		}

		.status-wait {
			color: #003D99;
			border: 1px solid #003D99;
		}

		.product-list {
			display: flex;
			flex-direction: column;
			gap: 24rpx;
		}

		.product-item {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.product-thumb {
				width: 90rpx;
				height: 90rpx;
				padding: 8rpx;
				overflow: hidden;
				margin-right: 16rpx;
				border-radius: 12rpx;
				box-sizing: border-box;
				background-color: rgba(0, 0, 0, 0.06);

				image {
					width: 100%;
					height: 100%;
				}
			}

			.product-title {
				color: #000000;
				font-size: 32rpx;
				font-weight: 400;
				text-align: left;
				line-height: 46rpx;
			}

			.product-price {
				color: #000000;
				font-size: 32rpx;
				font-weight: 400;
				text-align: left;
				line-height: 46rpx;
			}

			.quantity {
				color: rgba(0, 0, 0, 0.4);
				font-size: 26rpx;
				font-weight: 400;
				text-align: right;
				line-height: 36rpx;
			}
		}

		.relation {
			padding: 16rpx 16rpx;
			margin-top: 16rpx;
			margin-left: 24rpx;
			border-radius: 12rpx;
			background-color: #F2F2F2;

			.product-thumb {
				width: 56rpx;
				height: 56rpx;
			}

			.product-title {
				color: #000000;
				font-size: 26rpx;
				font-weight: 400;
				text-align: left;
				line-height: 36rpx;
			}

			.product-price {
				color: #000000;
				font-size: 26rpx;
				font-weight: 400;
				text-align: left;
				line-height: 36rpx;
			}
		}
	}

	.footer-btns {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		z-index: 999;
		padding: 20rpx 32rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		box-shadow: 0px 0px 33rpx rgba(0, 0, 0, 0.05);
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		gap: 14rpx;
		display: flex;
		align-items: center;
	}
</style>